<template>
  <div class="app-container">
    <div class="search-container" ref="searchRef">
      <el-form :model="state.search" inline size="mini" label-width="80px">
        <el-form-item label="姓名">
          <el-input class="w-180" v-model="state.search.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="商户名">
          <el-input class="w-180" v-model="state.search.company" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="得分">
          <el-input class="w-180" v-model="state.search.score" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="是否合格">
          <el-input class="w-180" v-model="state.search.grade" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input class="w-180" v-model="state.search.title" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            class="w-180"
            v-model="state.search.start_time"
            type="datetime"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            class="w-180"
            v-model="state.search.end_time"
            type="datetime"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList" size="mini">搜索</el-button>
          <el-button type="warning" @click="reset" size="mini">重置</el-button>
          <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card shadow="never">

      <el-table :height="pageHeight + 'px'" :data="state.list" v-loading="state.loading" max-height="500">
        <el-table-column label="序号" type="index" min-width="80"></el-table-column>
        <el-table-column label="商户名" min-width="120" prop="company"></el-table-column>
        <el-table-column label="商户号" min-width="120" prop="number"></el-table-column>
        <el-table-column label="姓名" prop="name" min-width="120"></el-table-column>
        <el-table-column label="类型" prop="title" min-width="120"></el-table-column>
        <el-table-column label="答题正确数" min-width="120" prop="yes_questions"></el-table-column>
        <el-table-column label="答题错误数" min-width="120" prop="wrong_question"></el-table-column>
        <el-table-column label="得分" min-width="120" prop="score"></el-table-column>
        <el-table-column label="正确率" min-width="120" prop="accuracy"></el-table-column>
        <el-table-column label="是否合格" min-width="120" prop="grade"></el-table-column>
        <el-table-column label="安全证书数量" min-width="120" prop="certificate_number"></el-table-column>
        <el-table-column label="交卷时间" min-width="120" prop="add_time"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="state.pagination.page"
        v-model:page-size="state.pagination.rows"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @current-change="getList"
        @size-change="getList"
      />
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import { getFireSearch, getFireSearchExcl } from '@/api/dashboard'
const state = reactive({
  loading: false,
  search: {
    name: '', //姓名搜索
    company: '', //商户搜索
    title: '', //学习类型搜索
    sta_time: '', //开始时间
    end_time: '', //结束时间
    start_time: '',
    score: '',
    grade: ''
  },
  pagination: {
    rows: 50,
    page: 1
  },
  total: 0,
  list: []
})

const pageHeight = ref(0)
const searchRef = ref(null)

onMounted(() => {
  pageHeight.value = window.innerHeight - searchRef.value.clientHeight - 270
})

// 获取 列表数据
const getList = async (page = 1) => {
  state.loading = true
  if (page === 1) state.pagination.page = 1
  const { data } = await getFireSearch({ ...state.pagination, ...state.search }).finally(() => (state.loading = false))
  state.list = data

  state.total = data.length
}

getList()
const reset = () => {
  state.search = {
    name: '', //姓名搜索
    company: '', //商户搜索
    title: '', //学习类型搜索
    sta_time: '', //开始时间
    end_time: '', //结束时间
    start_time: ''
  }
  getList(1)
}

const onDownExcel = () => {
  getFireSearchExcl(state.search).then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.ms-excel'
    })

    if (window.navigator.msSaveOrOpenBlob) {
      //兼容IE10
      navigator.msSaveBlob(blob, '导出文件.xlsx')
    } else {
      const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
      const a = document.createElement('a') //创建a标签
      a.style.display = 'none'
      a.href = href // 指定下载链接
      a.download = '导出文件.xlsx' //指定下载文件名
      a.click() //触发下载
      URL.revokeObjectURL(a.href) //释放URL对象
    }
  })
}
</script>

<style lang="scss" scoped>
.border-box-content {
  text-align: start;
}

.w-180 {
  width: 180px;
}

.red {
  color: red;
  font-size: 14px;
}
</style>
